import { _decorator, Button, color, Color, Label, Node, Sprite, UITransform } from 'cc';
import { BasePopUp } from '../../../frame/component/ui.pop-up';
import { ClientAPI } from '../../api/client.api';
import GameDC from '../../manager/data.game.center';
import GameAssets from '../../manager/game.assets';
import GameManager from '../../manager/game.manager';
import { Float } from '../page/float';
import type { Popup } from '../page/popup';
const { ccclass, property } = _decorator;

@ccclass('Prop')
export class Prop extends BasePopUp<typeof Popup, 'video'|'diamond'|'not'> {
	protected default_return: 'not';

	private ui_icon: UITransform;
	private lbl_desc: Label;
	private prop_type: 'stash' | 'revoke' | 'shuffle';
	private move_container: UITransform;
	private move_prop_icon: Node;

	protected initAfterOnLoad(){
		this.move_container = this.node.getChildByName('prop-move').getComponent(UITransform);
		this.ui_icon = this.node.getChildByName('icon').getComponent(UITransform);
		this.lbl_desc = this.node.getChildByName('lbl-desc').getComponent(Label);
		this.renderLocalUI();
	}

	protected _click_event_: { [name: string]: (this: Prop, button: Button) => void; } = {
		close(){
			this.enableAllButton(false);
			this.exit('not').then(()=>this.enableAllButton(true));
		},
		async video(){
			this.enableAllButton(false);
			if(this.used_list.includes('video')){
				await Float.Hint(GameAssets.getLangText(65));
			}else{
				await ClientAPI.AD('incentive');
				await this.exit('video');
			}
			this.enableAllButton(true);
		},
		async diamond(){
			this.enableAllButton(false);
			if(this.used_list.includes('diamond')){
				await Float.Hint(GameAssets.getLangText(65));
			}else{
				let diamond = GameDC.User.diamond;

				if(diamond >= 100){
					GameManager.changeDiamond(-100);
					GameDC.Trigger.CHANGE_DIAMOND = -100;
					await this.exit('diamond');
				}else{
					await Float.Hint(GameAssets.getLangText(66));
				}
			}
			this.enableAllButton(true);
		}
	}

	private used_list: Array<'diamond'|'video'> = [];
	public onShow(prop: 'stash' | 'revoke' | 'shuffle', used_list?: Array<'diamond'|'video'>){
		this.used_list = used_list ?? [];
		this.prop_type = prop;
		this.move_prop_icon = this.move_container.node.getChildByName('icon-prop-'+prop);
		this.refreshButton();
		mtec.cc.skinPeeler(this.ui_icon.node, this.smap.get('icon-prop-'+prop), {height: true});
		this.lbl_desc.string = GameAssets.getLangText({stash: 27, revoke: 28, shuffle: 29}[prop]);
		BasePopUp.jelly_enter(this.node);
	}

	private async exit(type: 'video'|'diamond'|'not'){
		if(type != 'not'){
			Float.addProp(this.prop_type, this.move_prop_icon);
		}
		await BasePopUp.jelly_leave(this.node);
		this.close(type);
	}

	private renderLocalUI(){
		this.node.getChildByName('lbl-diamond').getComponent(Label).string = GameAssets.getLangText(30);
		this.node.getChildByName('lbl-video').getComponent(Label).string = GameAssets.getLangText(31);
	}

	private refreshButton(){
		let gray = Color.fromHEX(color(), '#7C7C7C');
		let outline_color = Color.fromHEX(color(), '#1B1724');

		let video_enable = !this.used_list.includes('video');
		let diamond_enable = !this.used_list.includes('diamond');

		this.node.getChildByName('video').getComponent(Sprite).grayscale = !video_enable;
		this.node.getChildByName('diamond').getComponent(Sprite).grayscale = !diamond_enable;
		this.node.getChildByName('icon-diamond').getComponent(Sprite).grayscale = !diamond_enable;

		this.node.getChildByName('lbl-video').getComponent(Label).outlineColor = this.used_list.includes('video') ? gray : outline_color;
		this.node.getChildByName('lbl-diamond').getComponent(Label).outlineColor = this.used_list.includes('diamond') ? gray : outline_color;
	}

	private enableAllButton(enable: boolean){
		['video', 'diamond', 'close']
		.forEach(name=>this.__btn_map__.get(name).interactable = enable);
	}
}

